<template>
  <a-card class="device-page-right">
    <DeviceSearch ref="search" @deviceSearch="deviceSearch" />
    <div class="flex w-full gap-2 mb-4" v-if="loaded">
      <div
        class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
        @click="goPrePage"
      >
        <ArrowLeftOutlined class="text-gray-700" />
      </div>
      <div class="grid flex-grow gap-3 xl:grid-cols-2 content">
        <DeviceCard
          v-for="device in showDeviceList"
          :key="device.id"
          :device="device"
        />
      </div>
      <div
        class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
        @click="goNextPage"
      >
        <ArrowRightOutlined class="text-gray-700" />
      </div>
    </div>
    <div class="flex justify-center" v-if="loaded">
      <a-pagination
        class=""
        :show-size-changer="false"
        :current="current"
        :pageSize="9"
        :total="deviceLength"
        @change="sizeChange"
      />
    </div>
    <div v-else class="flex items-center justify-center bg-gray-200 h-96">
      <a-spin size="large" />
    </div>
  </a-card>
</template>

<script lang="ts">
import DeviceCard from "@/components/cards/DeviceCard.vue";
import DeviceSearch from "@/components/search/DeviceSearch.vue";
import { listDevice, searchDevice } from "@/controller/Cloud";
import { CloudDevice, SearchDeviceForm } from "model";
import { computed, defineComponent, onBeforeMount, ref } from "vue";
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "DeivcePageRight",
  components: {
    DeviceSearch,
    DeviceCard,
    ArrowLeftOutlined,
    ArrowRightOutlined,
  },
  setup() {
    const search = ref();
    const deviceList = ref<Array<CloudDevice>>([]);

    const loaded = ref<boolean>(false);

    onBeforeMount(async () => {
      loaded.value = false;
      deviceList.value = await listDevice();
      loaded.value = true;
    });
    const current = ref<number>(1);
    const deviceLength = computed(() => deviceList.value.length);
    const pageLength = computed(() => Math.ceil(deviceLength.value / 8));
    const showDeviceList = computed(() => {
      return deviceList.value.slice((current.value - 1) * 8, current.value * 8);
    });
    const goPrePage = () => {
      if (current.value > 1) current.value--;
    };
    const goNextPage = () => {
      if (current.value < pageLength.value) current.value++;
    };
    const sizeChange = (cur: number) => {
      current.value = cur;
    };
    const deviceSearch = async (searchForm: SearchDeviceForm) => {
      current.value = 1;
      loaded.value = false;
      deviceList.value = await searchDevice(searchForm);
      loaded.value = true;
    };
    return {
      loaded,
      search,
      deviceSearch,
      deviceList,
      current,
      deviceLength,
      showDeviceList,
      goPrePage,
      goNextPage,
      sizeChange,
    };
  },
});
</script>

<style scoped lang="scss"></style>
